<!--开票服务费-->
<template>
  <div>
    <div class="invoice">
      <template v-if="detailList && detailList.stepRates">
        <a-card v-for="item in detailList.stepRates" :title="item.name" style="width: 500px">
          <!--        <span slot="extra">默认费率</span>-->
          <detail-list title="渠道服务费" :col="1" class="detail-layout">
            <detail-list-item term="服务费类型：">
              <!--费率：1固定费率；2阶梯费率;3累计阶梯-->
              {{{1:'固定费率',2:'阶梯费率',3:'累计阶梯'}[item.agreeRateType] || ''}} 服务费
            </detail-list-item>
            <detail-list-item term="服务费率：">
              <div v-if="item.agreeRateType == 1">
                {{ item.agreeRate }} %
              </div>
              <div v-else>
                <template v-for="jery in item.rateList">
                  <p>
                    {{ jery.min ? jery.min : 0 }}元 < 开票金额 ≤
                    {{ jery.max ? jery.max : 0 }}元，服务费率：
                    {{ jery.rate ? jery.rate : 0 }}%
                  </p>
                </template>
              </div>
            </detail-list-item>
<!--            <detail-list-item term="状态：">{{ item.bizUserName }}</detail-list-item>-->
            <detail-list-item term="适用企业：" v-if="applicableEntNumObj">
              <div>个体：{{ applicableEntNumObj.individualNum }}家</div>
              <div>个独：{{ applicableEntNumObj.personalNum }}家</div>
              <div>合作企业：{{ applicableEntNumObj.cooperationNum }}家</div>
              <div>有限公司：{{ applicableEntNumObj.ltdNum }}家</div>
            </detail-list-item>
          </detail-list>
        </a-card>
      </template>
      <div v-else style="width: 40%;text-align: center;padding-top: 50px;">
        <a-empty />
      </div>
    </div>
  </div>
</template>

<script>
import DetailList from '@/components/tools/DetailList'
const DetailListItem = DetailList.Item
export default {
  name: "invoiceServiceFee",
  props: ['detailList','applicableEntNumObj'],
  components:{
    DetailList,
    DetailListItem
  },
  data(){
    return{

    }
  },
}
</script>

<style scoped lang="less">
  .invoice{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
  }

  .ant-card-bordered{
    margin-right: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
  }
</style>
